<template>
  <el-header>
    <div class="toolbar">
      <el-dropdown>
        <el-icon style="margin-right: 8px; margin-top: 1px"><setting /></el-icon>
        <template #dropdown>
          <el-dropdown-menu>
            <el-dropdown-item @click="$router.push('/login')">退出</el-dropdown-item>
          </el-dropdown-menu>
        </template>
      </el-dropdown>
      <span>张三</span>
    </div>

    <el-radio-group v-model="isCollapse" style="margin-bottom: 20px">
      <el-radio-button :value="false">expand</el-radio-button>
      <el-radio-button :value="true">collapse</el-radio-button>
    </el-radio-group>
  </el-header>
</template>
<script setup lang="ts">
import { ref, defineEmits, defineProps, watchEffect } from 'vue'
const emits = defineEmits(['cosChnage'])
const props = defineProps(['cos'])
// emits('cosChnage',true)
const isCollapse = ref(props.cos)

// 监听组件内部自己的 isCollapse 改变
// 一旦改变，通知父组件---并且传入最新的 折叠状态
watchEffect(() => {
  // isCollapse.value
  emits('cosChnage', isCollapse.value)
})
</script>
<style lang="css" scoped>
.el-header {
  position: relative;
}
.toolbar {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 100%;
  right: 20px;
  position: absolute;
}
</style>
